<!--
 * @Description: 第十二章 认识组件&Vue3生命周期
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-12 15:59:59
-->

<template>
  <div>
    <p>认识组件&Vue3生命周期</p>
    <div>
      <p># 认识组件</p>
      <div>
        <p>## 单一使用</p>
        <A></A>
      </div>
      <div>
        <p>## 多次调用</p>
        <A></A>
        <A></A>
        <A></A>
      </div>
    </div>
    <div>
      <p># 组件的生命周期</p>
      <div>
        <p>## 基础</p>
        <B></B>
      </div>
      <div>
        <p>## B组件 创建-销毁</p>
        <B v-if="b_flag"></B>
        <button @click="b_flag = !b_flag">创建-销毁</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from '@/components/12th/A.vue'
import B from '@/components/12th/B.vue'

const b_flag = ref<Boolean>(false)
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
